<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
	*{
		margin: 0;padding: 0;
	}
	#left{
		width: 400px;
		height:400px;
		border:1px solid red;
		float: left;
		background: url(400.jpg) no-repeat;
		position:relative;
	}
	#right{
		width: 400px;
		height: 400px;
		/*border:1px solid green;*/
		float:left;
		margin-left: 20px;
		overflow: hidden;
		display: none;
		position:relative;
	}
	#kuang{
		width: 200px;
		height: 200px;
		background: white;
		opacity: 0.6;
		position:absolute;
		top:0px;
		left:0px;
		display: none;
	}
	#zhezhao{
		width: 400px;
		height: 400px;
		position:absolute;
		left:0px;top:0px;

	}
	#img{
		position: absolute;
		top:0px;left: 0px;
	}
	</style>

	<script type="text/javascript">
	window.onload=function(){
		var left=document.getElementById('left');
		var kuang=document.getElementById('kuang');
		var right=document.getElementById('right');
		var img=document.getElementById('img');

		left.onmousemove=function(e){
			right.style.display='block';
			kuang.style.display='block';
			// 获得鼠标坐标
			var ev=e||window.event;
			var zb_x=ev.offsetX||ev.layerX;
			var zb_y=ev.offsetY||ev.layerY;
			//给小框位置
			var kuang_left=zb_x-kuang.offsetWidth/2;
			var kuang_top=zb_y-kuang.offsetHeight/2;
			if(kuang_left>=200){
				kuang_left=200;
			}
			if(kuang_left<=0){
				kuang_left=0;
			}
			if(kuang_top>=200){
				kuang_top=200;
			}
			if(kuang_top<=0){
				kuang_top=0;
			}
			kuang.style.left=kuang_left+'px';
			kuang.style.top=kuang_top+'px';

			var img_left=kuang_left*-2;
			var img_top=kuang_top*-2;
			img.style.left=img_left+'px';
			img.style.top=img_top+'px';

		}
		left.onmouseout=function(){
			right.style.display='none';
			kuang.style.display='none';
		}





	}
	

	</script>
</head>
<body>
<div id="left">
	<div id="kuang"></div>
	<div id="zhezhao"></div>
</div>
<div id="right">
	<img id='img' src="800.jpg" alt="" />
</div>
</body>
</html>